<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				width: 100%;
				height: 340px;
				margin: 100px auto;
				position: relative;
			}
			
			.list {
				width: 1200px;
				height: 340px;
				position: absolute;
				left: 50%;
				margin-left: -600px;
				overflow: hidden;
			}
			
			li {
				list-style: none;
				position: absolute;
				top: 0;
				left: 0;
				float: left;
				transition: all 0.3s ease-out;
			}
			
			img {
				width: 751px;
				height: 300px;
				border: none;
			}
			
			.p1 {
				transform: translate3d(-224px, 0, 0) scale(0.81);
			}
			
			.p2 {
				transform: translate3d(0px, 0, 0) scale(0.81);
				transform-origin: 0 50%;
				opacity: 0.8;
				z-index: 2;
			}
			
			.p3 {
				transform: translate3d(224px, 0, 0) scale(1);
				z-index: 3;
				opacity: 1;
			}
			
			.p4 {
				transform: translate3d(449px, 0, 0) scale(0.81);
				transform-origin: 100% 50%;
				z-index: 2;
				opacity: 0.8;
			}
			
			.p5 {
				transform: translate3d(672px, 0, 0) scale(0.81);
			}
			
			.p6 {
				transform: translate3d(896px, 0, 0) scale(0.81);
			}
			
			.p7 {
				transform: translate3d(1120px, 0, 0) scale(0.81);
			}
		</style>

	</head>

	<body>
		<div class="box">
			<div class="list " ">
				<ul>
					<li class="p7 ">
						<a href="# "><img src="img/1.png " /></a>
					</li>
					<li class="p6 ">
						<a href="# "><img src="img/2.png " /></a>
					</li>
					<li class="p5 ">
						<a href="# "><img src="img/3.png " /></a>
					</li>
					<li class="p4 ">
						<a href="# "><img src="img/4.jpg " /></a>
					</li>
					<li class="p3 ">
						<a href="# "><img src="img/5.jpg " /></a>
					</li>
					<li class="p2 ">
						<a href="# "><img src="img/6.jpg " /></a>
					</li>
					<li class="p1 ">
						<a href="# "><img src="img/7.jpg " /></a>
					</li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript " src="js/jquery-2.1.0.js " ></script>
		<script type="text/javascript ">
			var cArr=["p7 ","p6 ","p5 ","p4 ","p3 ","p2 ","p1 "];
			var index = 0;
			setInterval(function(){
				cArr.push(cArr[0]);
					cArr.shift();
					$("li ").each(function(i,e){
						$(e).removeClass().addClass(cArr[i]);
					})
					index++;
					if (index>6) {
						index=0;
					}
			},2000);
			
			
		</script>

	</body>

</html>